<template>
	<view>
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar :is-back="false" :border-bottom="false" title=" " :background="navbarBackground">
			<view class="slot-wrap">
				<u-search
					action-text="取消"
					:clearabled="false"
					height="60"
					:action-style="actionStyle"
					placeholder="请输入商品名称"
					v-model="keywords"
					@custom="handleBack"
					@search="handleSearch"
				></u-search>
			</view>
		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar back-icon-color="#f1f1f1" :border-bottom="false" title=" " :background="navbarBackground">
			<view class="slot-wrap">
				<u-search :show-action="false" height="60" :action-style="actionStyle" placeholder="请输入商品名称" v-model="keywords" @search="handleSearch"></u-search>
			</view>
		</u-navbar>
		<!-- #endif -->
		<view class="main">
			<scroll-view scroll-y>
				<view v-show="!showResult">
					<view class="history" v-if="history.length !== 0">
						<view class="h-top">
							<text>搜索历史</text>
							<uni-icons size="16" type="trash" @click="showLogout = true"></uni-icons>
						</view>
						<view class="h-content">
							<text v-for="(item, index) in history" :key="index" @click="handleSearch(item.keywords)">{{ item.keywords }}</text>
						</view>
					</view>
					<view class="else" v-else><text>暂无搜索历史</text></view>
				</view>
				<view v-show="showResult">
					<view class="list" v-if="result.length !== 0">
						<view class="item" v-for="item in result" :key="item.id" @click="handleToDetail(item.id)">
							<u-image width="40vw" height="180" border-radius="10" :src="url + item.cover"></u-image>
							<view class="card-right">
								<text class="name">{{ item.title }}</text>
								<text class="un-price">{{ '￥' + item.origin_price }}</text>
								<view class="on-price">
									<view class="price">
										<text class="symbol">￥</text>
										<text>{{ item.present_price }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="else" v-else><text>没有相关数据</text></view>
				</view>
			</scroll-view>
		</view>
		<u-popup v-model="showLogout" border-radius="10" mode="center">
			<view class="popup">
				<text class="popup-title">提示</text>
				<view class="popup-content"><text>是否清空搜索记录？</text></view>
				<view class="popup-bottom">
					<text @tap="showLogout = false">取消</text>
					<text class="confirm" @tap="handleClearHistory">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import uniIcons from '../../../components/uni-icons/uni-icons.vue';
import { devUrl } from '../../../common/request.js';
export default {
	components: {
		uniIcons
	},
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			actionStyle: {
				color: '#f1f1f1'
			},
			keywords: '',
			history: [],
			result: [],
			showResult: false,
			showLogout: false,
			url: ''
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		this.url = devUrl;
		this.getHistoryList();
	},
	watch: {
		keywords: function() {
			if (this.keywords == '') {
				this.showResult = false;
			}
		}
	},
	methods: {
		handleBack() {
			uni.switchTab({
				url: '../shop'
			});
		},
		getHistoryList() {
			this.$tkRequest('/api/Search/getHistory').then(res => {
				this.history = res.data;
			});
		},
		handleSearch(keywords) {
			uni.showLoading({
				title: '搜索中...'
			});
			if (keywords) {
				this.keywords = keywords;
				this.$tkRequest('/api/Search/toSearch', {
					keywords: keywords
				}).then(res => {
					uni.hideLoading();
					this.result = res.data;
					this.getHistoryList();
					this.showResult = true;
				});
			} else {
				if (this.keywords !== '') {
					this.$tkRequest('/api/Search/toSearch', {
						keywords: this.keywords
					}).then(res => {
						uni.hideLoading();
						this.result = res.data;
						this.getHistoryList();
						this.showResult = true;
					});
				} else {
					uni.showToast({
						title: '请输入商品名称',
						icon: 'icon'
					});
					return false;
				}
			}
		},
		handleClearHistory() {
			uni.showLoading({
				title: '正在清空...'
			});
			this.$tkRequest('/api/Search/clear', {
				type: 2
			}).then(res => {
				this.showLogout = false;
				uni.hideLoading();
				uni.showToast({
					title: res.msg
				});
				this.getHistoryList();
			});
		},
		handleToDetail(id) {
			uni.navigateTo({
				url: `../detail/detail?id=${id}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.slot-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	/* #ifndef MP-WEIXIN */
	padding: 0 $uni-spacing-row-lg;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	padding-left: $uni-spacing-row-base;
	/* #endif */
}

.main {
	scroll-view {
		max-height: 100vh;
	}

	.history {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;

		.h-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 11pt;
		}

		.h-content {
			display: flex;
			flex-wrap: wrap;
			padding: $uni-spacing-col-base 0;

			text {
				padding: 5rpx 30rpx;
				border-radius: 30rpx;
				margin: 5rpx;
				font-size: 11pt;
			}
		}
	}
	.list {
		padding: $uni-spacing-col-base 0;

		.item {
			display: flex;
			align-items: center;
			padding: $uni-spacing-col-base $uni-spacing-row-lg;
			background-color: #fff;

			.card-right {
				flex: 1;
				height: 160rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: $uni-spacing-row-sm;
				overflow: hidden;

				.name {
					font-size: 1rem;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-weight: bold;
				}

				.un-price {
					font-size: 9pt;
					text-decoration: line-through;
					color: #999;
				}

				.on-price {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						color: #eab952;
						font-size: 1rem;

						.symbol {
							font-size: 10pt;
						}
					}
				}
			}
		}
	}

	.else {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 35vh 0;
		font-size: 1rem;
		color: #999;
	}
}

.popup {
	width: 70vw;
	padding: $uni-spacing-col-lg $uni-spacing-row-lg;
	display: flex;
	flex-direction: column;
	align-items: center;

	.popup-title {
		font-size: 12pt;
	}

	.popup-content {
		font-size: 1rem;
		padding: 40rpx 0;
	}

	.popup-bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: $uni-spacing-col-lg;
		font-size: 12pt;

		text {
			flex: 1;
			text-align: center;
		}

		.confirm {
			color: #3f6cb7;
		}
	}
}
</style>
